<!--  -->
<template>
    <div>
        <div class="cont">
            <!-- <div class="search">
                <img src="../../assets/images/home/search.png" alt="">
                <input type="text" placeholder="请输入搜索内容">
                <button class="btnsearch">搜索</button>
            </div> -->
            <searchBar :searchText="searchKey" @search="searchAction($event)"></searchBar>
            <div class="choiceness">
                <div class="nav">
                    <el-menu class="el-menu-vertical-demo" style="border:0px" @select="menuSelect(arguments)">
                        <el-submenu :index="index1 + ''" v-for="(item1, index1) in categoryList" :key="index1">
                            <template slot="title">
                                <span>{{ item1.name }}</span>
                            </template>
                            <el-menu-item-group>
                                <el-submenu :index="`${index1}-${index2}`" v-for="(item2, index2) in item1.children"
                                    :key="`${index1}-${index2}`">
                                    <template slot="title">{{ item2.name }}</template>
                                    <!-- <el-menu-item :index="`${index1}-${index2}-${index3}`"
                                        v-for="(item3, index3) in item2.children"
                                        :key="`${index1}-${index2}-${index3}`">{{ item3.name }}</el-menu-item> -->
                                    <el-checkbox-group v-model="checkList">
                                        <el-col class="col" v-for="(item3, _) in item2.children" :key="item3.id">
                                            <el-checkbox :label="item3.id" @change="checkBoxChange(arguments, item1)"
                                                fill="#ffffff" text-color="#000000">
                                                {{ item3.name }}</el-checkbox>
                                        </el-col>
                                    </el-checkbox-group>
                                </el-submenu>
                            </el-menu-item-group>
                        </el-submenu>

                    </el-menu>
                </div>
                <div class="navdetails infinite-list" v-infinite-scroll="load" style="overflow: auto">
                    <div class="item" v-for="(item, index) in goods_list" :key="index" @click="toGoodsDetail(item)">
                        <el-image class="cover" :src="item.thumbnail | imgSrc" alt="" fit="scale-down"></el-image>
                        <p>{{ item.title }}</p>
                        <p>{{ $t("公共.货币符号") }}{{ item.price }}</p>
                    </div>
                    <el-empty class="empty" v-if="goods_list.length == 0"></el-empty>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import searchBar from "@/components/searchBar.vue";
import {
    getAllCatRes,
    getCatGoods
} from "@/utils/api";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        searchBar
    },
    data() {
        //这里存放数据
        return {
            checked: false,
            categoryList: [],
            checkList: [],
            searchKey: "",
            cat_id: "",
            goods_list: []
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.searchKey = this.$route.params.searchKey || "";
        getAllCatRes().then(res => {
            if (res.code == 1) {
                this.categoryList = res.data;
            }
        });
        this.getCatGoodsReq();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    //方法集合
    methods: {
        getCatGoodsReq(next = false) {
            getCatGoods({
                one_cat_id: this.cat_id,
                two_category_id: "",
                category_id: this.checkList.join(','),
                title: this.searchKey
            }).then(res => {
                if (res.code == 1) {
                    if (this.goods_list.length == 0 || !next) {
                        this.goods_list = res.data.data;
                    } else {
                        this.goods_list = this.goods_list.concat(res.data.data);
                    }
                }
            });
        },
        searchAction(e) {
            this.searchKey = e;
            this.getCatGoodsReq();
        },
        menuSelect(args) {
            this.cat_id = [...args][0].split("-")[0];
        },
        checkBoxChange(args, item1) {
            if (this.checkList.length == 0) {
                this.cat_id = "";
            } else {
                this.cat_id = item1.id;
            }
            this.getCatGoodsReq(false);
        },
        toGoodsDetail(item) {
            this.$router.push({
                name: "goodsdetails",
                query: {
                    goods_id: item.id
                }
            })
        },
        load() {

        }
    },
    beforeCreate() { }, //生命周期 - 创建之前

    beforeMount() { }, //生命周期 - 挂载之前
}
</script>
<style lang="less" scoped>
.cont {
    margin: 0px 105px;
    display: flex;
    justify-content: center;
    flex-flow: row wrap;


    .search {
        width: 50%;
        height: 60px;
        background: #F9F9F9;
        border: 1px solid #F1F1F1;
        box-shadow: 0px 0px 10px 0px rgba(227, 227, 227, 0.41);
        border-radius: 30px;
        margin: 30px 0px;
        overflow: hidden;
        display: flex;
        align-items: center;

        img {
            width: 25px;
            height: 25px;
            margin-left: 10px;
        }

        input {
            width: 82%;
            height: 100%;
            outline: none;
            border: 0;
            background-color: transparent;
            text-indent: 2em;
            font-size: 20px;
            font-weight: 400;
            color: #999999;
        }

        .btnsearch {
            width: 15%;
            height: 54px;
            background: #FF5757;
            border-radius: 30px;
            // font-size: 20px;
            font-weight: 400;
            color: #FFFFFF;
            text-align: center;
            line-height: 54px;
            border: 0;
            outline: 0;
        }
    }

    .choiceness {
        width: 100%;
        display: flex;

        .nav {
            width: 15%;

            .col {
                margin-top: 20px;
            }

            .el-menu-vertical-demo {
                margin-top: 20px;

                /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
                .el-checkbox__input.is-indeterminate .el-checkbox__inner {
                    border-color: #222222 !important;
                    background-color: #222222 !important;
                }

                /deep/ .el-checkbox__input.is-focus .el-checkbox__inner {
                    border-color: #222222 !important;
                }

                //修改选中后文本的颜色
                /deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
                    color: #222222 !important;
                }

                /deep/ .el-checkbox__inner:hover {
                    border-color: #222222;
                }
            }
        }

        .navdetails {
            padding: 30px;
            flex: 1;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            flex-direction: row;
            gap: 50px;

            .item {
                width: 300px;
                height: 550px;
                cursor: pointer;
                display: flex;
                justify-content: flex-start;
                flex-direction: column;

                .cover {
                    width: 100%;
                    flex: 1;
                }

                p {
                    width: 100%;
                    text-align: center;
                    font-size: 16px;
                    font-weight: 600;
                    color: #222222;
                    line-height: 20px;
                }
            }

            .empty {
                width: 100%;
            }
        }
    }
}
</style>